<template>
  <div class="vote-detail">
      <div class="header" style="display:block;height:3.76rem;width:100%;backgroundSize:100%;position: relative" :style="{backgroundImage: 'url(' +detail.voteCoverUrl+ ')'}">
          <div class="title">{{detail.voteTitle}}</div>
      </div>
      <div class="vote">
        <div class="data-display flex-cont">
          <div class="data-item flex">
            <div class="flex-cont">
              <img src="../../images/voteUser.png" alt="" class="vote-user">
              <span>投票人</span>
            </div>
            <div class="num">{{detail.turnout}}</div>
          </div>
          <div class="data-item flex">
            <div class="flex-cont">
              <img src="../../images/voteNum.png" alt="" class="vote-num">
              <span>投票数</span>
            </div>
            <div class="num">{{detail.obtained}}</div>
          </div>
          <div class="data-item flex">
            <div class="flex-cont">
              <img src="../../images/watch1.png" alt="" class="watch-num">
              <span>浏览量</span>
            </div>
            <div class="num">{{detail.totalBrowsing}}</div>
          </div>
        </div>
        <div class="time">
          <div>投票开始时间：{{detail.voteStartTime}}</div>
          <div>投票截止时间：{{detail.voteEndTime}}</div>
        </div>
      </div>
      <div class="form-modal flex-box-align">
        <div class="btn-get" :class="{noClick: detail.isAsseted == 'y'}" @click="handleGet">领取投票代币</div>
        <div>
          <div class="search-modal">
            <search
              @result-click="resultClick"
              @on-change="getResult"
              :results="results"
              v-model="value"
              @on-focus="onFocus"
              @on-cancel="onCancel"
              :auto-fixed="true"
              placeholder="请输入选项编号或名称"
              :auto-scroll-to-top="true"
              ref="search"></search>
          </div>
        </div>
      </div>
      <div class="vote-list">
        <ul>
          <li v-for="(item, index) in detail.voteOptionList" :key="index" @click="$router.push({path: '/optionDetail', query: {json: JSON.stringify(item)}})">
            <div class="bg" style="width: 6.9rem;height: 3.28rem;background-size:100%;position: relative;" :style="{backgroundImage: 'url(' +item.optionCoverUrl+ ')'}">
              <div class="pos-cover flex-box-align">
                <div class="flex" style="margin-left: .3rem;">票数：{{item.turnout}}</div>
                <div class="flex-box-align">
                  <span style="margin-right: .08rem;">详情</span>
                  <img src="../../images/moreRight.png" alt="" class="arrow-right">
                </div>
              </div>
            </div>
            <div class="detail-modal">
              <div class="flex-box-align" style="margin-bottom: .34rem;">
                <div class="flex title">{{index+1}}.{{item.optionContent}}</div>
                <div class="btn-vote" @click.stop="handleClickVote(item.voteId, item.optionId, index)" v-if="item.isVoted == 'n'">投票</div>
                <div class="btn-vote noclick" v-else>投票</div>
              </div>
              <div class="flex-box-align">
                <div class="address flex">区块链地址：
                  {{item.optionAddress}}
                </div>
                <button class="btn-copy" type="button"
                        v-clipboard:copy.stop="item.optionAddress"
                        v-clipboard:success="onCopy"
                        v-clipboard:error="onError">复制</button>
              </div>

            </div>
          </li>

        </ul>
      </div>
      <ul class="detail-nav-list flex-cont">
        <li :class="{active: active == 'all'}" @click="linkToDetail">全部选项</li>
        <li :class="{active: active == 'rank'}" @click="$router.replace({path:'voteRank',query: {id: id}})">当前排名</li>
        <li :class="{active: active == 'brief'}" @click="$router.replace({path:'voteBrief',query: {id: id}})">活动介绍</li>
      </ul>
  </div>
</template>

<script>
  import { Search } from 'vux'
  import {parseUrlParams} from "../../util";
  let CONSTANT = require('../../../wechat/static/constant/constant.js'),
    common = require("../../../wechat/static/common/common.js"),
    wsService = require("../../../wechat/static/common/wechat-jsdk.js");

  export default {
    components: {
      Search
    },
    data () {
      return {
        id: "",
        message: "",
        url: "https://img-test.wemeshops.com/3dbd10d0-2ef3-4e7a-ba97-dfcdaf2799f3.png",
        results: [],
        value: "",
        detail: {
          url: "https://img-test.wemeshops.com/3dbd10d0-2ef3-4e7a-ba97-dfcdaf2799f3.png",
        },
        active: "all",
      }
    },
    mounted(){
      this.id = parseUrlParams("id")
      this.getDetail()
    },
    methods:{
      getDetail() {
        common.requestAjax(CONSTANT.URL.VOTE.VOTEDETAIL, {}, {voteId: parseUrlParams("id")}, (res) => {
          if (res.status == 200) {
            this.detail = res.data.bussData
          }
        })
      },
      handleGet() {
        common.requestAjax(CONSTANT.URL.VOTEOPTION.OPTION, {}, {voteId: parseUrlParams("id")}, (res) => {
          if (res.status == 200) {
            this.detail.isAsseted = "y"
            this.$vux.alert.show({
              title: "提示",
              content: res.msg,
              onShow () {

              },
              onHide () {
              }
            })
          }
          if(res.status == 500) {
            this.$vux.alert.show({
              title: "提示",
              content: res.msg,
              onShow () {

              },
              onHide () {
              }
            })
          }
        })
      },
      handleClickVote(voteId, optionId, index) {
        if(this.detail.isAsseted == 'n') {
          this.$vux.alert.show({
            title: "提示",
            content: "请先领取投票代币",
            onShow () {

            },
            onHide () {
            }
          })
          return false;
        }
        let self = this;
        common.requestAjax(CONSTANT.URL.VOTEOPTION.VOTE, {}, {voteId: voteId, optionId: optionId}, (res) => {
          if (res.status == 200) {
            this.detail.voteOptionList[index].isVoted = "y"
            this.$vux.alert.show({
              title: "提示",
              content: res.msg,
              onShow () {

              },
              onHide () {
                self.getDetail()
              }
            })
          }
          if (res.status == 500) {
            this.$vux.alert.show({
              title: "提示",
              content: res.msg,
              onShow () {

              },
              onHide () {
              }
            })
          }
        })
      },
      handleClickNav(val) {
        this.active = val
      },
      linkToDetail() {
          if (this.detail.voteOptionType == "1") {
            this.$router.replace({path: '/voteDetailEasy',query: {id: this.id}})
          } else if(this.detail.voteOptionType == "2") {
            this.$router.replace({path: '/voteDetail',query: {id: this.id}})
          }
      },
      resultClick (item) {
        this.$router.push({path: '/optionDetail', query: {json: JSON.stringify(item)}})
      },
      getResult (val) {
        console.log('on-change', val)
        this.results = val ? this.getResult1(val) : []
      },
      getResult1(val) {
        let rs = [];
        for (let i = 0; i < this.detail.voteOptionList.length; i++) {
          if (this.detail.voteOptionList[i].optionContent.indexOf(val) != -1) {
            this.detail.voteOptionList[i] = Object.assign(this.detail.voteOptionList[i], {title: this.detail.voteOptionList[i].optionContent})
          }
        }
        rs = this.detail.voteOptionList
        rs = rs.filter( item => {
          return item.optionContent.indexOf(val) != -1
        })
        return rs
      },
      onSubmit () {
//        this.$refs.search.setBlur()
//        this.$vux.toast.show({
//          type: 'text',
//          position: 'top',
//          text: 'on submit'
//        })
      },
      onFocus () {
        console.log('on focus')
      },
      onCancel () {
        console.log('on cancel')
      },
      onCopy(val) {
        this.$vux.alert.show({
          title: "提示",
          content: "复制成功",
          onShow () {

          },
          onHide () {
          }
        })
        event.cancelBubble = true;
      },
      onError() {

      }
    },
  }
</script>

<style lang="scss">
    .vote-detail {
      height: 100%;
      background-color: #f2f2f2;
      font-size: .32rem;
      .header {
        .title {
          width: 100%;
          position: absolute;
          bottom: 0;
          left: 0;
          line-height: .6rem;
          height: .6rem;
          text-align: center;
          font-size: .34rem;
          color: #fff;
          background: rgba(0, 0, 0, 0.4);
        }
      }
      .vote {
        padding: .25rem .3rem .37rem .3rem;
        background-color: #fff;
        .data-display {
          .data-item {
            font-size: .32rem;
            text-align: center;
            .num {
              color: #D82121;
            }
            img {
              vertical-align: middle;
              margin-right: .15rem;
            }
            .vote-user {
              width: .27rem;
              height: .29rem;
            }
            .vote-num {
              width: .41rem;
              height: .28rem;
            }
            .watch-num {
              width: .3rem;
              height: .2rem;
            }
          }
        }
        .time {
          text-align: center;
          font-size: .28rem;
          div:first-child {
             color: #198AE7;
            margin-top: .4rem;
            margin-bottom: .23rem;
          }
          div:last-child {
            color: #E02D2D;
          }
        }
      }

      .form-modal {
        padding: 0 .68rem .37rem .68rem;
        background-color: #fff;
        .btn-get.noClick {
          pointer-events: none;
          background-color: #ccc;
        }
        .btn-get {
          padding: .16rem .24rem;
          white-space: nowrap;
          background-color: #198AE7;
          text-align: center;
          color: #fff;
          font-size: .28rem;
          border-radius: .1rem;
          margin-right: .3rem;
        }
        .search-modal {
          .weui-search-bar__label span {
            font-size: 12px!important;
          }
          input{
            font-size: 12px!important;
          }
          .weui-cells.vux-search_show {
            height: 100%;
          }
          .weui-search-bar {
            padding: 0!important;
          }
          .vux-search-fixed {
            .weui-search-bar {
              padding: 8px 10px!important;
            }
          }
          .vux-search-box.vux-search-fixed {
            .weui-search-bar__cancel-btn {
              display: block;
            }
          }
          .vux-search-box {
            .weui-search-bar__cancel-btn {
              display: none;
            }
          }
        }
      }
      .vote-list {
        margin-bottom: .98rem;
        background-color: #f2f2f2;
        ul {
          padding: .2rem .3rem;
          li {
            width: 6.9rem;
            /*padding: 0 .3rem;*/
            margin-bottom: .2rem;
            box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
            &:last-child {
              margin-bottom: 0;
            }
            .bg {
              .pos-cover {
                position: absolute;
                width: 100%;
                bottom: 0;
                left: 0;
                right: 0;
                height: .58rem;
                background: rgba(0, 0, 0, 0.5);
                /*padding: 0 .3rem;*/
                color: #fff;
                font-size: .26rem;
                .arrow-right {
                  width: .23rem;
                  height: .2rem;
                  vertical-align: middle;
                  margin-right: .3rem;
                }
              }
            }
            .detail-modal {
              padding: .3rem .3rem .47rem .3rem;
              background-color: #fff;
              .title {
                color: #333;
              }
              .btn-vote {
                width: 1.8rem;
                height: .52rem;
                line-height: .52rem;
                text-align: center;
                background-color: #198AE7;
                color: #fff;
                border-radius: .1rem;
                font-size: .28rem;
              }
              .noclick {
                pointer-events: none;
                background-color: #ccc;
              }
              .btn-copy {
                display: inline-block;
                background-color: #198AE7;
                color: #fff;
                font-size: .26rem;
                padding: 2px .3rem;
                border-radius: .1rem;
                margin-left: .3rem;
                border: none;
              }
              .address {
                font-size: .28rem;
                color: #666;
                word-break: break-all;
                display:-webkit-box;
                -webkit-box-orient:vertical;
                -webkit-line-clamp:2;
                overflow:hidden;
                text-overflow:ellipsis;

              }
            }
          }
        }
      }
      .detail-nav-list {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        &:after {
          content:"";
          position: absolute;
          width: 100%;
          height: 1px;
          background-color: #d1d1d1;
          left: 0;
          right: 0;
          top: 0;
          transform: scaleY(.5);
        }
        li {
          height: .98rem;
          line-height: .98rem;
          text-align: center;
          flex: 1;
          -webkit-flex: 1;
          color: #fff;
          background-color: #000;
          position: relative;
          &:after {
            content: "";
            position: absolute;
            width: 1px;
            height: 100%;
            background-color: #fff;
            right: 0;
            bottom: 0;
            top: 0;
            transform: scaleX(.5);
          }
          &:active {
            opacity: .6;
          }
        }
        li.active {
          color: #198AE7;
          background-color: #fff;
        }
      }
    }
</style>
